<template>
    <div class="user-index">
        <!-- 头部添加 -->
        <header>
            <el-button color="#da9233" @click="drawer = true">添加</el-button>
        </header>
        <main v-loading="loading">
            <el-card style="height: 100%">
                <el-table
                    :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }"
                    :data="tableData"
                    max-height="480"
                    stripe
                    style="width: 100%"
                    ><el-table-column prop="id" label="用户Id" width="130" />
                    <el-table-column
                        prop="username"
                        label="用户名"
                        width="230"
                    />
                    <el-table-column
                        prop="email"
                        label="用户邮箱"
                        width="230"
                    /><el-table-column
                        prop="nickname"
                        label="昵称"
                        width="230"
                    />
                    <el-table-column label="性别" width="130">
                        <template #default="scope">
                            <span v-if="scope.row.gender == 0">男</span>
                            <span v-else>女</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="230">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                >修改</el-button
                            >

                            <el-popconfirm
                                confirm-button-text="是"
                                cancel-button-text="否"
                                :icon="InfoFilled"
                                icon-color="#626AEF"
                                title="确定要删除该用户吗？"
                                @confirm="confirmEvent(scope.row.id)"
                            >
                                <template #reference>
                                    <el-button link type="primary" size="small"
                                        >删除</el-button
                                    >
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table></el-card
            >
        </main>
        <!-- 底部 -->
        <footer>
            <el-pagination
                layout="prev, pager, next"
                :total="tablePage.total"
                :current-page="tablePage.pageNum"
                :page-size="tablePage.pageSize"
                @current-change="handlePageChange"
            />
        </footer>
        <el-drawer v-model="drawer" title="I am the title" :with-header="false">
            <div style="width: 400px; text-align: center">添加用户</div>
            <el-form
                label-position="top"
                label-width="200px"
                :model="formLabelAlign"
                style="max-width: 460px"
            >
                <el-form-item label="用户名">
                    <el-input v-model="formLabelAlign.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formLabelAlign.password" />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="formLabelAlign.email" />
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="formLabelAlign.nickname" />
                </el-form-item>
                <el-button style="margin-left: 230px" @click="drawer = false"
                    >取消</el-button
                >
                <el-button @click="add" color="#da9233">确定</el-button>
            </el-form>
        </el-drawer>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import { onMounted, ref, reactive } from 'vue'
import { findUser, deleteUser, addUser } from '../../apis/user'
import md5 from 'js-md5'
const drawer = ref(false)
const tableData = ref([])
const tablePage = reactive({
    pageNum: 1, // 第几页
    pageSize: 11, // 每页多少条
    total: 0, // 总记录数
})
const formLabelAlign = reactive({
    username: '',
    password: '',
    email: '',
    nickname: '',
})
let loading = ref(true)
onMounted(() => {
    findUser().then(res => {
        tableData.value = res.sub
        tablePage.total = res.count
        loading.value = false
    })
})
const handlePageChange = currentPage => {
    loading.value = true
    tablePage.pageNum = currentPage
    findUser(tablePage.pageNum).then(res => {
        tableData.value = res.sub
        tablePage.total = res.count
        loading.value = false
    })
    // 在此刷新数据
}
// 删除执行事件
const confirmEvent = id => {
    deleteUser(id).then(res => {
        handlePageChange()
    })
}
const add = () => {
    drawer.value = false
    formLabelAlign.password = md5(formLabelAlign.password)
    addUser(formLabelAlign).then(res => {
        handlePageChange()
        ElMessage({
            message: '添加成功！',
            type: 'success',
        })
    })
}
</script>

<style lang="scss" scoped>
.user-index {
    header {
        height: 35px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    main {
        height: 500px;
    }
    footer {
        margin-top: 5px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
